<template>
  <div class="user-edit-wrapper">
    <el-card class="edit-card">
      <template #header>
        <div class="card-header">
          <span>编辑用户 #{{ user.u_id }}</span>
        </div>
      </template>
      
      <el-form :model="user" label-width="100px">
        <el-form-item label="用户账号">
          <el-input v-model="user.username" disabled />
        </el-form-item>
        
        <el-form-item label="用户昵称">
          <el-input v-model="user.nickname" />
        </el-form-item>
        
        <el-form-item label="用户头像">
          <el-upload
            class="avatar-uploader"
            action=""
            :show-file-list="false"
            :auto-upload="false"
            @change="handleAvatarChange">
            <img v-if="user.avatar" :src="user.avatar" class="avatar">
            <el-icon v-else class="avatar-uploader-icon"><Plus /></el-icon>
          </el-upload>
        </el-form-item>
        
        <el-form-item label="性别">
          <el-radio-group v-model="user.gender">
            <el-radio :label="1">男</el-radio>
            <el-radio :label="0">女</el-radio>
          </el-radio-group>
        </el-form-item>
        
        <el-form-item label="用户角色">
          <el-select v-model="user.role" class="m-2" placeholder="选择角色">
            <el-option
              v-for="item in roleOptions"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </el-form-item>
        
        <el-form-item label="用户状态">
          <el-select v-model="user.state" class="m-2" placeholder="选择状态">
            <el-option
              v-for="item in stateOptions"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </el-form-item>
        
        <el-form-item>
          <el-button type="primary" @click="submitForm">保存修改</el-button>
          <el-button @click="cancelEdit">取消</el-button>
        </el-form-item>
      </el-form>
    </el-card>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue';
import { useRoute, useRouter } from 'vue-router';
import { ElMessage } from 'element-plus';
import { Plus } from '@element-plus/icons-vue';

const route = useRoute();
const router = useRouter();

// 从路由参数获取用户数据
const user = ref({
    u_id: route.params.id,
    username: '',
    nickname: '',
    avatar: '',
    gender: 1,
    role: 0,
    state: 0,
    create_date: ''
});

// 角色选项
const roleOptions = [
    { value: 0, label: '普通用户' },
    { value: 1, label: '管理员' },
    { value: 2, label: '超级管理员' }
];

// 状态选项
const stateOptions = [
    { value: 0, label: '正常' },
    { value: 1, label: '封禁' },
    { value: 2, label: '注销' }
];

// 模拟获取用户数据
onMounted(() => {
    // 这里应该是从API获取用户数据的逻辑
    // 暂时使用模拟数据
    user.value = {
        u_id: route.params.id,
        username: 'user' + route.params.id,
        nickname: '用户' + route.params.id,
        avatar: 'https://pic.imgdb.cn/item/65e7f8d89f345e8d03c0b1e5.jpg',
        gender: route.params.id % 2,
        role: route.params.id % 3,
        state: 0,
        create_date: new Date().toISOString()
    };
});

const handleAvatarChange = (file) => {
    const reader = new FileReader();
    reader.onload = () => {
        user.value.avatar = reader.result;
    };
    reader.readAsDataURL(file.raw);
};

const submitForm = () => {
    ElMessage.success('修改成功');
    router.back();
};

const cancelEdit = () => {
    router.back();
};
</script>

<style scoped>
.user-edit-wrapper {
  padding: 20px;
  background-color: var(--el-bg-color-page);
  min-height: calc(100vh - 64px);
}

.edit-card {
  max-width: 800px;
  margin: 20px auto;
  border-radius: 12px;
  box-shadow: var(--el-box-shadow-light);
}

.card-header {
  font-size: 18px;
  font-weight: bold;
  color: var(--el-text-color-primary);
  padding: 16px 20px;
  border-bottom: 1px solid var(--el-border-color-light);
}

.el-form {
  padding: 20px 30px;
}

.el-form-item {
  margin-bottom: 24px;
}

.el-form-item__content {
  margin-top: 8px; /* 增加表单项内容与label的间距 */
}

/* 头像上传区域特殊处理 */
.avatar-uploader {
  margin-top: 8px; /* 保持与普通表单项一致 */
}

.el-form-item__label {
  padding-right: 20px; /* 增加label和input之间的间距 */
}

.el-input :deep(.el-input__inner),
.el-select :deep(.el-input__inner) {
  padding: 0 12px; /* 增加input内边距 */
}

/* 单选按钮组特殊处理 */
.el-radio-group {
  padding-left: 8px; /* 使单选按钮与label对齐 */
}

.el-form-item:last-child {
  margin-top: 32px;
  margin-bottom: 0;
}

.el-button {
  border-radius: 6px;
  padding: 10px 24px;
  margin-right: 16px;
}

/* 头像上传样式 */
.avatar-uploader {
  display: flex;
  justify-content: center;
  margin: 12px 0;
}

.avatar-uploader :deep(.el-upload) {
  border: 1px dashed var(--el-border-color);
  border-radius: 8px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: all 0.3s;
}

.avatar-uploader :deep(.el-upload:hover) {
  border-color: var(--el-color-primary);
}

.avatar-uploader-icon {
  font-size: 28px;
  color: var(--el-text-color-placeholder);
  width: 120px;
  height: 120px;
  line-height: 120px;
  text-align: center;
}

.avatar {
  width: 120px;
  height: 120px;
  display: block;
  border-radius: 8px;
  object-fit: cover;
}

/* 单选按钮组样式 */
.el-radio-group {
  padding: 8px 0;
}

/* 下拉选择器样式 */
.el-select {
  width: 100%;
}
</style>